<template>
	<view>
		
		<view class="item" style="padding: 20rpx 30rpx 0;">
		
			<u-form :model="addbean" ref="uform" label-width="auto">
				
				<view style="height: 50rpx;display: flex;align-items: center;">
					<u-icon name="order" color="#1573FF" label="车辆信息" label-color="#333333"></u-icon>
				</view>
				
				<u-form-item label="选择车架号" :required="true" borderBottom @click="selVin">
					<u-input v-model="addbean.vinNo" inputAlign="right" placeholder="选择车架号" disabled
						disabledColor="#ffffff" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
						
				<u-form-item label="选择车牌号" :required="true" borderBottom @click="selVin">
					<u-input v-model="addbean.carNo" inputAlign="right" placeholder="选择车牌号" disabled
						disabledColor="#ffffff" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
						
				<u-form-item label="车辆归属" borderBottom>
					<u-input v-model="addbean.deptName" inputAlign="right" disabled
						disabledColor="#ffffff" border="none" placeholder="自动获取"></u-input>
				</u-form-item>
						
				<u-form-item label="车辆仓库" borderBottom>
					<u-input v-model="addbean.depotName" inputAlign="right" disabled
						disabledColor="#ffffff" border="none" placeholder="自动获取">
					</u-input>
				</u-form-item>
					
				<u-form-item label="随车物品" prop="">
				</u-form-item>
				
				<uni-data-checkbox multiple v-model="accessoryValueList" :localdata="checkboxList" 
				:map="{
					'value':'value',
					'text':'value'
				}"
				></uni-data-checkbox>
						
				<u-form-item label="备注">
					<u-input v-model="addbean.carDesc" inputAlign="right" placeholder="请输入备注" border="none"></u-input>
				</u-form-item>
				
			</u-form>
			
		</view>
		
		<view class="item" style="padding: 20rpx 30rpx 0;">
		
			<u-form :model="addbean" ref="uform" label-width="auto">
				
				<view style="height: 50rpx;display: flex;align-items: center;">
					<u-icon name="order" color="#1573FF" label="换车费用项" label-color="#333333"></u-icon>
				</view>
				
				<u-form-item label="月租金是否调整" label-width="230" borderBottom>
					
					<u-radio-group
						v-model="addbean.planAdjust">
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="是" name="1">
							<!-- {{ item.name }} -->
						</u-radio>
						<u-radio
						 :customStyle="{'margin-right': '15rpx'}"
						 shape="circle" label="否" name="0">
							<!-- {{ item.name }} -->
						</u-radio>
					</u-radio-group>
				</u-form-item>
				
				<u-form-item label="原有月租金" v-if="1==addbean.planAdjust" borderBottom>
					<u-input :value="`￥${model.monthlyRentOld}`" inputAlign="right" placeholder="" disabled
						disabledColor="#ffffff" border="none"></u-input>
				</u-form-item>
						
				<u-form-item label="调整月租金为" :required="true" v-if="1==addbean.planAdjust" borderBottom>
					<u-input v-model="addbean.monthlyRentNew" type="digit" inputAlign="right" placeholder="请输入" border="none"></u-input>
				</u-form-item>
						
				<u-form-item label="费用项" @click="selFee">
					<u-input v-model="feeStr" inputAlign="right" disabled
						disabledColor="#ffffff" border="none" placeholder="添加费用项"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
			</u-form>
			
		</view>
		
		<view class="item" style="padding: 20rpx 30rpx 0;">
		
			<u-form :model="addbean" ref="uform" label-width="auto">
				
				<view style="height: 50rpx;display: flex;align-items: center;">
					<u-icon name="order" color="#1573FF" label="交车信息" label-color="#333333"></u-icon>
				</view>
				
				<u-form-item label="交车时间" borderBottom>
					<u-input v-model="model.timeDelivery" inputAlign="right" placeholder="" disabled
						disabledColor="#ffffff" border="none"></u-input>
				</u-form-item>
						
				<u-form-item label="交车工作人员" :required="true" borderBottom @click="selGiveMan">
					<u-input v-model="addbean.deliveryOperationName" inputAlign="right" placeholder="请选择" disabled
						disabledColor="#ffffff" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
						
				<u-form-item label="交车备注" borderBottom>
					<u-input v-model="addbean.deliveryDesc" inputAlign="right" border="none" placeholder="请输入备注"></u-input>
				</u-form-item>
				
				<view style="display: flex;flex-direction: column;">
					<u-form-item label="交车附件">
					</u-form-item>
					
					<lr-upload ref="upload1" tag="1" @on-change="uploadOnChange"></lr-upload>
				</view>
				
				<u-form-item label="交车当前里程数/km" borderBottom>
					<u-input v-model="addbean.deliveryMileage" type="digit" inputAlign="right" border="none" placeholder="请输入"></u-input>
				</u-form-item>
				
				<u-form-item label="下次保养公里数/km" borderBottom>
					<u-input v-model="addbean.mileageNextMaintenance" type="digit" inputAlign="right" border="none" placeholder="请输入"></u-input>
				</u-form-item>
				
				<u-form-item label="下次保养时间" @click="timeShow=true">
					<u-input v-model="addbean.mileageNextDate" inputAlign="right" placeholder="请选择" disabled
						disabledColor="#ffffff" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
			</u-form>
			
		</view>
		
		
		<view style="height: 100rpx;"></view>
		
		<view class="button-container">
			<button class="btn-item" @click="commit">提交</button>
		</view>
		
		<!-- 还款时间 -->
		<u-datetime-picker
			:show="timeShow"
			mode="date" @confirm="timeConfirm"
			@cancel="timeShow=false"></u-datetime-picker>
		
	</view>
</template>

<script>
	import lrUpload from '@/components/global/lr-upload.vue'
	export default {
		components: {
			lrUpload,
		},
		data() {
			return {
				timeShow:false,
				model:{
					monthlyRentOld:'',
					timeDelivery:''
				},
				addbean:{
					mileageNextDate:'',
					carId:'',
					carNo:'',
					vinNo:'',
					deptId:'',
					deptName:'',
					depotId:'',
					depotName:'',
					cityId:'',
					cityName:'',
					mileage:'',
					accessoryItemsName:'',
					accessoryItems:'',
					carDesc:'',
					planAdjust:'',
					monthlyRentNew:'',
					deliveryOperationId:'',
					deliveryOperationName:'',
					deliveryDesc:'',
					deliveryMileage:'',
					mileageNextMaintenance:'',
					deliveryFileLst:[],
					feeItemList:[]
				},
				orderCarId:'',
				querychoice:{},
				//随车物品
				checkboxList: [],
				accessoryValueList:[],
				feeStr:''
			}
		},
		methods: {
			
			//图片上传成功回调
			uploadOnChange(tag, resultList, resultObjList) {
				console.log(tag, resultList, resultObjList);
				switch (tag) {
					case '1': //订单附件
						this.addbean.deliveryFileLst = resultList;
						break
				}
			},
			
			selVin(){
				uni.navigateTo({
					url:'/pages/car/allocation/car-carlist'
				})
			},
			
			selFee(){
				
				getApp().globalData.feeItemList = this.model.feeItemList
				
				var intentData = JSON.stringify(this.addbean.feeItemList);
				uni.navigateTo({
					url:'/pagesB/distributecar/add-feeitem?feeItemList=' + intentData
				})
			},
			
			selGiveMan(){
				uni.navigateTo({
					url:'/pages/customer/buss_owner_list'
				})
			},
			
			timeConfirm(e){
				let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				
				this.timeShow = false;
				this.addbean.mileageNextDate = timeStr;
			},
			
			commit(){
				this.addbean.orderCarId = this.orderCarId
				
				this.addbean.accessoryItemsName = this.accessoryValueList.join(',')
				
				let that = this
				
				if(uni.$u.test.isEmpty(this.addbean.carId)){
					this.$u.toast('请选择车辆')
					return
				}
				
				if(uni.$u.test.isEmpty(this.addbean.deliveryOperationId)){
					this.$u.toast('请选择交车人')
					return
				}
				
				if(1==this.addbean.planAdjust && uni.$u.test.isEmpty(this.addbean.monthlyRentNew)){
					this.$u.toast('请输入新月租金')
					return
				}
				
				
				uni.showModal({
					title:'确定提交吗?',
					success:(res)=>{
						if(res.confirm){
							that.$u.api.applyforDeliveryCarSubmit(that.addbean).then(res=>{
								that.$u.toast('提交成功')
								uni.$emit('refreshOrder', true)
								setTimeout(()=>{
									uni.navigateBack()
								}, 1000)
							})
						}
					}
				})
			},
			
			
		},
		onLoad(op) {
			this.orderCarId = 'null'!=op.orderCarId?op.orderCarId:''
			this.querychoice = this.$store.state.params.getCarCommon
			
			this.checkboxList = this.querychoice.accessoryItem
			
			this.$u.api.applyforDeliveryCarDetail({
				orderCarId:this.orderCarId
			}).then(res=>{
				this.model = res
			})
			
			let that = this
			
			//选车了
			uni.$on('selCar', res => {
				
				console.log('收到了车辆', res);
				
				if(res.vinNo!=that.addbean.vinNo){
					//重置其他条件
					if(!uni.$u.test.isEmpty(res.accessoryItemsName)){
						
						that.accessoryValueList = res.accessoryItemsName.split(',')
					}
					
				}
				
				
				that.addbean.carId = res.carId
				that.addbean.carNo = res.carNo
				that.addbean.vinNo = res.vinNo
				that.addbean.deptId = res.deptId
				that.addbean.deptName = res.deptName
				that.addbean.depotId = res.depotId
				that.addbean.depotName = res.depotName
				that.addbean.cityId = res.cityId
				that.addbean.cityName = res.cityName
				
				console.log('===>', that.addbean);
			})
			
			
			//交车工作人员选择了
			uni.$on('getRes', res => {
				//收到选择的渠道商了
				this.addbean.deliveryOperationId = res.userId
				this.addbean.deliveryOperationName = res.username
			})
			
			//添加尾款了
			uni.$on('addFee', res=>{
				this.addbean.feeItemList = res;
				this.feeStr = !uni.$u.test.isEmpty(this.addbean.feeItemList)?'已添加费用项':''
			})
		}
	}
</script>

<style>

</style>
